<template>
	<view :style="bgurl">
		<uni-nav-bar backgroundColor="#fff" left-width="360rpx" statusBar=true fixed=true>
			<block slot="left" style="width:100%;height:30px">
				<view class="mp-title">
					<!-- <text class="uni-nav-bar-text">标题栏</text> -->
				</view>
			</block>
			<!-- <view class="input-view">
								<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
								
							</view> -->
			<block slot="right">

			</block>
		</uni-nav-bar>
		<view @click="showMobileMegaNav" style="top:85px;position: fixed;right:10rpx;"><uni-icons type="bars"
				size="30"></uni-icons>
		</view>
		<view>
			<view class="home-section">
				<view class="home__title">最新
				</view>
				<view class="home__desc">
					
				</view>
				<view class="recent-wrapper">
					<text class="recent-more" @click="clickMore">更多>></text>
				</view>
				<albumNav :group="recentArray"></albumNav>

			</view>
		</view>
		<view style="background-color:#222228">
			<view class="style-section">
				<view class="home__title">风格
				</view>
				<view class="home__desc">
					风格标签
				</view>
				<styleGroup :group="styleArray"></styleGroup>
			</view>
		</view>
		<view class="meganav_cover" :class="meganavcoverClass"></view>
		<view class="meganav">
			<view class="megabar mega-bar container" :class="megabarClass">

				<!-- <view class="site-name">Music Gateway</view>
				<view id="cobrand-logo"></view> -->

				<view class="mega-section categories">
					<view class="headings">
						<view id="artists-heading" class="group" @click="showMobileBack">主题
						</view>
						<view id="promotion-heading" class="group" @click="showMobileBack">插画
							<view class="megagroup" :style="megagroup">
								<view class="promotion-group navigation-links">
									<view class="mega-sub-heading">Promotion</view>
									<view class="nav-block-group">

										<a href="/spotify-promotion" class="nav-block m">
											<view class="nav-block-title" style="">Spotify Promotion</view>
											<view class="nav-block-description">We guarantee organic plays with through
												our
												network of influencers.</view>
										</a>
										<a href="/radio-promotion" class="nav-block m">
											<view class="nav-block-title" style="">Radio promotion</view>
											<view class="nav-block-description">Our radio pluggers work with the biggest
												stations around the world.</view>
										</a>
										<a href="/music-marketing" class="nav-block m">
											<view class="nav-block-title" style="">Music Marketing</view>
											<view class="nav-block-description">Everything from social marketing to
												music
												videos.</view>
										</a>

									</view>
								</view>
							</view>
						</view>
						<view id="management-heading" class="group" @click="showMobileBack">魅影
						</view>
						<view id="licensing-heading" class="group" @click="showMobileBack">收藏

						</view>
						<view>
							<u-link href="">Pricing</u-link>
						</view>
						<view>
							<u-link href="">Blog</u-link>
						</view>
					</view>
				</view>

				<!-- <view class="mega-section mobile-meganav" @click="showMobileMegaNav"><img width="28" height="12"
						alt="Burger menu" src="/static/i-burger-menu.svg"></view> -->
				<view class="mobile-meganav-nav">
					<view class="mobile-meganav-nav-back" :style="navback" @click="hideMobileBack"><img
							alt="Large chevron" src="/static/i-chevron-large.svg">
					</view>
					<view class="mobile-meganav-nav-exit" @click="hideMobileMegaNav"><img alt="close icon"
							src="/static/i-close.svg"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import albumNav from "../../components/album-nav/album-nav.vue"
	import styleGroup from "../../components/style-group/style-group.vue"
	import albumPreview from "../../components/album-preview/album-preview.vue"
	import config from '../../common/config.js'
	const host = getApp().globalData.apiurl;
	export default {
		// props: {
		// 	list: {
		// 		type: Array,
		// 		default: function() {
		// 			return [];
		// 		},
		// 	},
		// },
		components: {
			albumNav,
			styleGroup,
			albumPreview
		},
		data() {
			return {
				title: "Hello",
				kind: config,
				groupArray: [],
				group: {},
				navback: "display:none",
				megagroup: "",
				megabarClass: "",
				meganavcoverClass: "show",
				loading: true,
				recentArray: [],
				styleArray: [],
				largeMode: false,
				bgurl: `background:url(${host}/Image/Background/bgsection.png) top right`
			};
		},
		onLoad() {
			try {
				let that = this;
				that.loading = true;
				uni.showLoading({
					title: '正在全力加载中...'
				})
				that.loadStyle().then(res => {
					that.styleArray = res.data;
				});
				that.loadRecent().then(res => {
					that.recentArray = res.data;

				}).catch().finally(() => {
					that.loading = false;
					uni.hideLoading();
				});
			} catch {

			}
		},
		methods: {
			async loadRecent() {
				let that = this;
				return await new Promise((resolve, reject) => {
					that.$Request.post(`${host}/api/Recent?kind=Theme&top=10`, {}).then(res => {
						if (res.statusCode != 200) {
							reject(res);
							return;
						}
						resolve(res);
					}).catch(err => {
						reject(err);
					})
				})
			},
			async loadStyle() {
				return await new Promise((resolve, reject) => {
					this.$Request.post(`${host}/api/GetCoverByTopKind?top=Theme`, {}).then(res => {
						if (res.statusCode != 200) {
							reject(res);
							return;
						}
						resolve(res);
					}).catch(err => {
						reject(err);
					})
				})
			},
			mnArtistShow() {
				this.groupActions('show', 'artists-group');
			},

			mnArtistHide() {
				this.groupActions('hide', 'artists-group');
			},

			mnManagementShow() {
				this.groupActions('show', 'management-group');
			},

			mnManagementHide() {
				this.groupActions('hide', 'management-group');
			},

			mnPromotionShow() {
				this.groupActions('show', 'promotion-group');
			},

			mnPromotionHide() {
				this.groupActions('hide', 'promotion-group');
			},

			mnLicensingShow() {
				this.groupActions('show', 'licensing-group');
			},

			mnLicensingHide() {
				this.groupActions('hide', 'licensing-group');
			},

			showMobileMegaNav() {
				this.megabarClass = "mobile"
				this.meganavcoverClass = "show"
			},

			hideMobileMegaNav() {
				this.megabarClass = "";
				this.navback = "display:none"
				this.meganavcoverClass = "";
				this.hideMobileBack();
			},

			showMobileBack() {
				this.navback = 'display:flex';
			},

			hideMobileBack() {
				this.navback = 'display:none';
				this.megagroup = 'display:none';
			},

			groupActions(action, id) {
				if (action == 'show') {
					document.getElementById(id).classList.add('show');
					document.getElementById(id).parentNode.style.display = 'block';
				} else if (action == 'hide') {
					document.getElementById(id).classList.remove('show');
					document.getElementById(id).parentNode.style.display = 'none';
				} else if (action == 'toggle') {
					if (document.getElementById(id).classList.contains('show')) {
						document.getElementById(id).classList.remove('show');
					} else {
						document.getElementById(id).classList.add('show');
					}
				}
			},
			openSlide() {

			},
			clickMore(event) {
				let title = event.title;
				let background = event.background;
				let path = event.path;
				const url = `/pages/design/view`;
				uni.$emit("sendKind", 123)

				if (getCurrentPages().length > 9) {

					uni.redirectTo({
						url,
					});
				} else {
					uni.navigateTo({
						url,
					});
				}
			},

		},
	};
</script>

<style scoped lang="scss">
	@import "@/common/style/slidemenu.css";

	Page {
		background-color: #222228;
	}

	.home-section {
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		padding: 92rpx 20rpx 20rpx;
		background: linear-gradient(to bottom, rgba(103, 103, 103, 0), #222228), top right;
		background-size: cover;
	}

	// url(/static/image/bgsection.png)
	.style-section {
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		padding: 92rpx 20rpx 20rpx;
		background: linear-gradient(to bottom, rgba(103, 103, 103, 0), #222228), url($apiurl'/Image/Background/bgsection.png') top right;
		background-size: cover;
	}

	.home__title,
	.home__desc {
		padding-left: 32rpx;
		font-weight: normal;
		line-height: 42rpx;
		user-select: none;
	}

	.home__title {
		margin: 0 0 32rpx;
		font-size: 64rpx;
		color: $home-text;
	}

	.home__image,
	.home__text {
		display: inline-block;
	}

	.home__image {
		width: 100%;

	}

	.home__text {
		margin-left: 32rpx;
		font-weight: 500;
	}

	.home__title .-small {
		font-size: 48rpx;
	}

	.home__desc {
		margin: 0 0 80rpx;
		color: $home-text;
		font-size: 28rpx;
	}

	.recent-wrapper {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.recent-more {
		right: 10rpx;
		color: $home-text;
	}

	.mp-title {
		height: 30px;
		background: url('/static/image/logo.png') no-repeat center center;
		background-size: 100% 100%;
	}
</style>